<template>
  <view>
    <!-- 搜索 -->
    <view class="search">
      <u-search
        placeholder="日照香炉生紫烟"
        :show-action="fales"
        v-model="value"
        @input="searchChange"
      ></u-search>
    </view>

    <!-- 内容 -->
    <view class="cotent" v-for="item in list" :key="item.goods_id">
      <view class="list_img">
        <u-image
          :src="item.goods_small_logo"
          mode="widthFix"
          width="80%"
        ></u-image>
      </view>
      <view class="list_name u-line-3">{{ item.goods_name }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: "", //用户输入的关键字
      list: [], //搜索结果
    };
  },

  methods: {
    searchChange(e) {
      //三秒钟发送一次请求
      clearInterval(timeId);
      let timeId = setTimeout(() => {
        this.$u
          .get("/goods/search", {
            query: e,
          })
          .then((res) => {
            this.list = res.message.goods;
            console.log(this.list);
          });
      }, 3000);
    },
  },
};
</script>

<style lang="scss">
.search {
  margin-top: 10rpx;
  padding: 0 10rpx;
  margin: 20rpx 0;
}
.cotent {
  display: flex;
  padding: 0 20rpx;
  .list_img {
    flex: 1;
  }
  .list_name {
    flex: 2;
  }
}
</style>